<html>
<head>
<title> New DAB Templates</title>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="static/jquery.simplecolorpicker.js"></script>

<link rel="stylesheet" href="static/jquery.simplecolorpicker.css">
<style> 

body{
	font-family:Helvetica, sans-serif;
	background:#f8f8f8;
	padding:0;
	margin:0;
}

a{
	text-decoration:none;
}

.toolbar{
	background:#efefef;
	padding:10px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}

.toolbar span{
	display:inline-block;
	color:#888;
	font-size:12px;
}
.toolbar a{
	background:#6fc181;
	color:#fff;
	display:inline-block;
	padding:5px 10px;
	margin:0 5px 0;
	border-radius:2px;
	font-size:12px;
	box-shadow:0px 2px 3px rgba(0,0,0,0.4);
}
.toolbar span.divider{
	display:inline-block;
	margin:0 5px;
	background:#ccc;
	width:1px;
	height:16px;
	top:5px;
	position: relative;;
}
.toolbar a.off{
	background:#ccc;
}

.image-off .image{
	display:none;
}
.description-off .description{
	display:none;
}
.title-off .title{
	display:none;
}
.logo-off .logo{
	display:none;
}

.image-off .bg2{
	opacity:1;
}

.logo:before{
	content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.logo img {
  display: inline-block;
  vertical-align: middle;
}

.hideboundingbox-off .logo,
.hideboundingbox-off .text,
.hideboundingbox-off .title,
.hideboundingbox-off .description{
	border:1px solid rgba(0,0,0,0.6);
}
.ads-board{
	position: absolute;
	min-height:600px;
	margin:100px;
	top:44px;
	left:0;
	background:#f8f8f8;
	z-index:1;
	width:100%;
	transition:all 0.4s ease-in-out;
}

.ads-board > div{
	overflow:hidden;
	font-family:'Roboto',sans-serif;
	border:1px solid #333;
}
	.ad300x250{
		position: absolute;
		top:0;
		left:0;
		width:300px;
		height:250px;
	}

	.ad300x250label{
		position: absolute;
		top:-20px;
		left:0;
		width:300px;
		height:250px;
	font-size:10px;
	}

	.ad336x280{
		position: absolute;
		top:0;
		left:365px;
		width:336px;
		height:280px;
	}
	.ad336x280label{
		position: absolute;
		top:-20px;
		left:365px;
		width:336px;
		height:280px;
	font-size:10px;
	}
	.ad160x600{
		position: absolute;
		top:0;
		left:765px;
		width:160px;
		height:600px;
	}
	.ad160x600label{
		position: absolute;
		top:-20px;
		left:765px;
		width:160px;
		height:600px;
	font-size:10px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad120x600label{
		position: absolute;
		top:-20px;
		left:985px;
		width:120px;
		height:600px;
	font-size:10px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad120x600label{
		position: absolute;
		top:-20px;
		left:985px;
		width:120px;
	font-size:10px;
		height:600px;
	}
	.ad468x60{
		position: absolute;
		top:400px;
		left:0;
		width:468px;
		height:60px;
	}
	.ad468x60label{
		position: absolute;
		top:380px;
		left:0;
		width:468px;
		height:60px;
	font-size:10px;
	}
	.ad728x90{
		position: absolute;
		top:510px;
		left:0;
		width:728px;
		height:90px;
	}
	.ad728x90label{
		position: absolute;
		top:490px;
		left:0;
		width:728px;
		height:90px;
	font-size:10px;
	}
	.ad320x50{
		position: absolute;
		top:300px;
		left:0;
		width:320px;
		height:50px;
	}
	.ad320x50label{
		position: absolute;
		top:280px;
		left:0;
		width:320px;
		height:50px;
	font-size:10px;
	}

.frosted{
	font-family: 'Open Sans', sans-serif;
}

.title{
	color:#fff;
	font-size:21px;
	font-weight:400;
}

.description{
	color:#333;
	font-size:13px;
	font-weight:400;
	line-height:16px;
}

span.size{
	position: relative;
	top:-25px;
	font-size:10px;
}

.bg1{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
	background:#ffffff;
	z-index:2;
	box-shadow:0px 0px 4px rgba(0,0,0,0.5);
}
.bg2{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#68cbfc url(images/origami/mask.svg) 0 0 no-repeat;
	background-size:100% 100%;
	z-index:0;
}

.ad160x600 .bg2,
.ad120x600 .bg2{
	background:#68cbfc url(images/origami/mask-vertical.svg) 0 0 no-repeat;
}
.ad320x50 .bg2,
.ad468x60 .bg2,
.ad728x90 .bg2{
	background:#68cbfc url(images/origami/mask-horizontal.svg) 0 0 no-repeat;
	background-size:cover;
}

.image{
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

.button{
	background:#68cbfc;
	border-radius:4px;
	height:30px;
	line-height:30px;
	text-align:center;
	display:inline-block;
	padding:0px;
	color:#000;
	font-size:13px;
	font-weight:bold;
	position:absolute;
	z-index:3;
	overflow:hidden;
	text-overflow:ellipsis;
}

.ad300x250{
	background:#57aec9;
}

.ad300x250 .logo{
	position:absolute;
	bottom:10px;
	left:20px;
	width:140px;
	z-index:3;
	height:30px;
}

.ad300x250 .logo img{
	max-width:100%;
	max-height:100%;
}
.ad300x250 .bg1{
	
}

.ad300x250 .image{
	top:0;
	right:0;
	left:auto;
	width:180px;
	height:200px;
	overflow:hidden;
	-webkit-clip-path: polygon(70px 200px,180px 200px,180px 0px,20px 0px);
	
}

.animate .ad300x250 .image {
	-webkit-clip-path: polygon(180px 200px,180px 200px,180px 0px,180px 0px);
}
.ad300x250 .image img{
	width:auto;
	height:100%;
	margin-left:-90px;
}

.ad300x250 .text{
	position:absolute;
	top:40px;
	left:15px;
	width:140px;
	z-index:3;
}

.ad300x250 .title{
	margin-bottom:15px;
}

.ad300x250 .button{
	bottom:10px;
	right:10px;
	min-width:125px;
	max-width:125px;
}

.ad336x280 .logo{
	position:absolute;
	bottom:10px;
	left:20px;
	width:140px;
	z-index:3;
	height:30px;
}

.ad336x280 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad336x280 .image{
	top:0;
	right:0;
	left:auto;
	width:180px;
	height:230px;
	overflow:hidden;
	-webkit-clip-path: polygon(50px 230px,180px 230px,180px 0px,0px 0px);
}

.animate .ad336x280 .image {
	-webkit-clip-path: polygon(180px 230px,180px 230px,180px 0px,180px 0px);
}

.ad336x280 .image img{
	width:auto;
	height:100%;
	margin-left:-120px;
}

.ad336x280 .text{
	position:absolute;
	top:40px;
	left:15px;
	width:160px;
	z-index:3;
}

.ad336x280 .title{
	font-size:21px;
	margin-bottom:15px;
}

.ad336x280 .description{
	font-size:14px;
	line-height:17px;
}

.ad336x280 .button{
	bottom:10px;
	right:10px;
	min-width:125px;
	max-width:125px;
}

.ad160x600 .logo{
	position:absolute;
	top:10px;
	left:15px;
	width:130px;
	z-index:3;
	height:40px;
	text-align:center;
}

.ad160x600 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad160x600 .image{
	top:auto;
	bottom:60px;
	right:0;
	left:auto;
	width:160px;
	height:270px;
	overflow:hidden;
	-webkit-clip-path: polygon(0px 270px,160px 270px,160px 0px,0px 30px);
}

.animate .ad160x600 .image {
	-webkit-clip-path: polygon(160px 270px,160px 270px,180px 0px,160px 0px);
}

.ad160x600 .image img{
	width:auto;
	height:100%;
	margin-left:-185px;
}

.ad160x600 .text{
	position:absolute;
	top:80px;
	left:15px;
	width:130px;
	z-index:3;
}

.ad160x600 .title{
	font-size:20px;
	font-weight:400;
	margin-bottom:15px;
}

.ad160x600 .description{
	font-size:13px;
	line-height:17px;
}

.ad160x600 .button{
	bottom:15px;
	left:10px;
	min-width:140px;
	max-width:140px;
}

.ad160x600 .bg1{
	height:60px;
}
.ad160x600 .bg1:before{
	content:'';
	background:#fff;
	display:block;
	width:100%;
	height:70px;
	margin-top:-540px;
	-webkit-clip-path: polygon(0px 55px,160px 70px,160px 0px,0px 0px);
	transition:all 0.4s -webkit-transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.animate .ad160x600 .bg1:before{
	transform:translateY(-200px);
}



.ad120x600 .logo{
	position:absolute;
	top:10px;
	left:10px;
	width:100px;
	z-index:3;
	height:40px;
	text-align:center;
}

.ad120x600 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad120x600 .image{
	top:auto;
	bottom:60px;
	right:0;
	left:auto;
	width:120px;
	height:270px;
	overflow:hidden;
	-webkit-clip-path: polygon(0px 270px,120px 270px,120px 0px,0px 30px);
}

.animate .ad120x600 .image {
	-webkit-clip-path: polygon(120px 270px,120px 270px,120px 0px,120px 0px);
}

.ad120x600 .image img{
	width:auto;
	height:100%;
	margin-left:-200px;
}

.ad120x600 .text{
	position:absolute;
	top:80px;
	left:10px;
	width:100px;
	z-index:3;
}

.ad120x600 .button{
	bottom:15px;
	left:10px;
	min-width:100px;
	max-width:100px;
}

.ad120x600 .bg1{
	height:60px;
}
.ad120x600 .bg1:before{
	content:'';
	background:#fff;
	display:block;
	width:100%;
	height:70px;
	margin-top:-540px;
	-webkit-clip-path: polygon(0px 55px,120px 70px,120px 0px,0px 0px);
}

.ad120x600 .title{
	font-size:17px;
	font-weight:400;
	margin-bottom:15px;
}

.ad120x600 .description{
	font-size:13px;
	line-height:17px;
}

.ad468x60 .image{
	top:0;
	left:250px;
	right:auto;
	width:130px;
	height:60px;
	overflow:hidden;
	-webkit-clip-path: polygon(10px 60px,130px 60px,130px 0px,0px 0px);
}

.animate .ad468x60 .image {
	-webkit-clip-path: polygon(130px 60px,130px 60px,130px 0px,130px 0px);
}
.ad468x60 .image img{
	width:160%;
	height:auto;
	margin:-20px 0 0 -70px;
}

.ad468x60 .bg1{
	right:-5px;
	top:0;
	bottom:0;
	left:auto;
	height:70px;
	width:120px;
	-webkit-clip-path: polygon(30px 65px,120px 65px,120px 0px,10px 0px);
}

.animate .ad468x60 .bg1{
	transform:translateX(200px);
}

.animate .ad468x60 .logo{
	transform:translate(200px,0)
}

.animate .ad468x60 .button{
	transform:translate(200px, 0);
}
.ad468x60 .logo{
	position:absolute;
	top:2px;
	right:10px;
	width:70px;
	z-index:3;
	height:30px;
}

.ad468x60 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad468x60 .text{
	position:absolute;
	top:5px;
	left:10px;
	width:230px;
	z-index:3;
}

.ad468x60 .title{
	font-size:17px;
	font-weight:400;
	margin-bottom:2px;
}

.ad468x60 .description{
	font-size:12px;
	line-height:13px;
}

.ad468x60 .button{
	top:auto;
	bottom:4px;
	font-size:11px;
	right:5px;
	width:80px;
	height:24px;
	line-height:24px;
}


.ad728x90 .image{
	top:0;
	left:360px;
	right:auto;
	width:250px;
	height:90px;
	overflow:hidden;
	-webkit-clip-path: polygon(20px 90px,250px 90px,250px 0px,0px 0px);
}

.animate .ad728x90 .image {
	-webkit-clip-path: polygon(250px 90px,250px 90px,250px 0px,250px 0px);
}
.ad728x90 .image img{
	width:160%;
	height:auto;
	margin:-45px 0 0 -140px;
}

.ad728x90 .bg1{
	right:-5px;
	top:0;
	bottom:0;
	left:auto;
	height:90px;
	width:180px;
	-webkit-clip-path: polygon(60px 95px,190px 95px,190px 0px,10px 0px);
}

.animate .ad728x90 .bg1{
	transform:translateX(200px);
}

.animate .ad728x90 .logo{
	transform:translate(200px,0)
}

.animate .ad728x90 .button{
	transform:translate(200px, 0);
}
.ad728x90 .logo{
	position:absolute;
	top:10px;
	right:10px;
	width:100px;
	z-index:3;
	height:30px;
}

.ad728x90 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad728x90 .text{
	position:absolute;
	top:10px;
	left:20px;
	width:330px;
	z-index:3;
}

.ad728x90 .title{
	
}

.ad728x90 .button{
	top:auto;
	bottom:10px;
	font-size:11px;
	right:10px;
	width:100px;
	height:24px;
	line-height:24px;
}

.ad320x50 .logo{
	position:absolute;
	top:5px;
	left:5px;
	width:60px;
	z-index:3;
	height:40px;
}

.ad320x50 .logo img{
	max-width:100%;
	vertical-align:middle;
	max-height:100%;
}


.ad320x50 .image img
{
	display:none;
}

.ad320x50 .bg1{
	top:0;
	left:0;
	right:auto;
	width:80px;
	height:50px;
	overflow:hidden;
	-webkit-clip-path: polygon(0px 55px,75px 55px,65px 0px,0px 0px);
	box-shadow:none;
}

.animate .ad320x50 .bg1 {
	-webkit-clip-path: polygon(0px 50px,0px 50px,0 0px,0px 0px);
}



.ad320x50 .image{
	background:#fff;
	width:60px;
	height:50px;
	left:auto;
	right:0;
	top:0;
	-webkit-clip-path: polygon(10px 55px,80px 55px,60px 0px,0px 0px);
}

.animate .ad320x50 .image{
	-webkit-clip-path: polygon(60px 55px,60px 55px,60px 0px,60px 0px);
}


.ad320x50 .image img{
	margin-top:-100px;
	width:100%;
}

.ad320x50 .text{
	position:absolute;
	top:5px;
	left:85px;
	width:165px;
	z-index:3;
	height:40px;
}


.ad320x50 .title{
	font-size:14px;
	height:100%;
	 display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

.ad320x50 .description{
	font-size:12px;
	font-weight:400;
	line-height:12px;
	display: flex;
	justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
  height:0;
  opacity:0;
}



.ad320x50 .button{
	top:5px;
	font-size:9px;
	right:5px;
	bottom:5px;
	height:40px;
	width:40px;
	text-indent:-9999em;
}

.ad320x50 .button:after{
	content:'';
	display:block;
	background:url(images/borders/arrow.svg) 50% 50% no-repeat;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:50% auto;
}




.specs{
	position:absolute;
	top:44px;
	left:0;
	-webkit-transition:opacity 0.4s ease-in-out;
	transition:opacity 0.4s ease-in-out;
	opacity:0;
}

.specs .wrapper{
	width:600px;
	margin:20px 100px 100px;
	position:relative;
	font-family: 'PT Serif', sans-serif;
}
.specs section:after{
	display:block;
	content:'';
	width:2px;
	top:70px;
	left:0;
	bottom:40px;
	background:#ddd;
	position:absolute;
}
.specs p{
	color:#7E7F7B;
	font-size:16px;
	position:relative;
	padding-left:30px;
	line-height:22px;
}
.specs p:after{
	width:16px;
	height:16px;
	-webkit-border-radius:8px;
	background:#ddd;
	position:absolute;
	content:'';
	display:block;
	top:0;
	left:-7px;
}
.specs h3{
	font-size:29px;
	color:#52544E;
	font-weight:normal;
	padding-left:30px;
}
.specs img{
	margin-left:30px;
}

.ads .specs{
	height:600px;
	overflow:hidden;
	opacity:0;
}

.showspecs .ads-board{
	opacity:0;
}

.showspecs .specs{
	
	opacity:1;
	overflow:auto;
}

@-webkit-keyframes fade {
    0% {opacity: 0; height:0%;}
    5% {opacity: 1; height:100%;}
    50% {opacity: 1; height:100%;}
    55% {opacity: 0; height:0;}
    100% {opacity: 0; height:0;}
}

.ad320x50 .fade{
	 -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}
.ad320x50 .description {
    -webkit-animation-delay: -3s;
}

.image,
.title,
.description,
.logo,
.bg2,
.bg1,
.button{
	-webkit-transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}


.title{transition-delay:0.2s;}
.description{transition-delay:0.4s;}
.logo{transition-delay:0.4s;}
.image {transition-delay:0.6s;}
.button {transition-delay:0.8s;}


.animate .title,
.animate .description{
	transform:translateY(-20px);
	opacity:0;
}
.animate .logo{
	transform:translateY(50px);
	opacity:0;
}

.animate .button{
	transform:translateY(50px);
}
.animate .bg2{
	opacity:0;
}
.animate .bg1{
	transform: translateY(50px);
}



body.animate:after{
	content:'';
	display:block;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff url(images/common/flapper.gif) 50% 50% no-repeat;
	text-align:center;
	vertical-align:middle;
	z-index:1000;
}
</style>
</head>
<body class="ads animate">
<div class="toolbar">
	<span>Toggle elements:</span>
	<a id="logo" href="javascript:;">Logo</a>
	<a id="title" href="javascript:;">Title</a>
	<a id="description" href="javascript:;">Description</a>
	<a id="image" href="javascript:;">Image</a>

	<span class="divider"></span>
	<span>bg1:</span>
	<select name="colorpicker-bg2">
	  <option value="#68cbfc">Green</option>
	  <option value="#5484ed">Bold blue</option>
	  <option value="#a4bdfc">Blue</option>
	  <option value="#46d6db">Turquoise</option>
	  <option value="#7ae7bf">Light green</option>
	  <option value="#51b749">Bold green</option>
	  <option value="#fbd75b">Yellow</option>
	  <option value="#ffb878">Orange</option>
	  <option value="#ff887c">Red</option>
	  <option value="#dc2127">Bold red</option>
	  <option value="#dbadff">Purple</option>
	  <option value="#e1e1e1">Gray</option>
	</select>
  
	<span style="margin-left:15px">bg2:</span>
	<select name="colorpicker-bg1">
	  <option value="#ffffff">Green</option>
	  <option value="#5484ed">Bold blue</option>
	  <option value="#a4bdfc">Blue</option>
	  <option value="#46d6db">Turquoise</option>
	  <option value="#7ae7bf">Light green</option>
	  <option value="#51b749">Bold green</option>
	  <option value="#fbd75b">Yellow</option>
	  <option value="#ffb878">Orange</option>
	  <option value="#ff887c">Red</option>
	  <option value="#dc2127">Bold red</option>
	  <option value="#dbadff">Purple</option>
	  <option value="#e1e1e1">Gray</option>
	</select>

	<span class="divider"></span>
	<span>Eng tools:</span>
	<a id="hideboundingbox" class="off" href="javascript:;">Toggle bounding box</a>
	<a id="showspecs" class="off" href="javascript:;">Show specs</a>
	<a id="animate" class="off" href="javascript:;">Repeat animation</a>
</div>

<div class="specs">
	<div class="wrapper">
		<section>
			<h3> Image positioning </h3>
			<p> When an image is available, it should always 'fill' the entirety of triangular image container. </p>
		</section>

		<section>
			<h3> Logo size &amp; positioning </h3>
			<p> The logo size should be set by making the logo image 'fit' within the logo area bounding box. </p>
			<p> Ideally, the user should be able to move the logo to wherever they wish by dragging it. </p>
		</section>

		<section>
			<h3> Text</h3>
			<p> Default title color is white, and default description color is #333333.</p>
		</section>

		<section>
			<h3> Fold effect</h3>
			<p> The fold effect is acheived by placing a semi-transparent pattern over the background.</p>
		</section>

		<section>
			<h3> Special case</h3>
			<p> In 160x600 and 120x600 sizes, bg2 splits into two segments, one at the top and the other at the bottom. These two segments should still have the same background color.</p>
		</section>

		<section>
			<h3> Background color</h3>
			<p> The default background color is #68cbfc, but the user may change it. </p>
			
		</section>

		<section>
			<h3> Button color</h3>
			<p> The default button background color should be #68cbfc, and the default button text should be black. </p>
		</section>
		
		<section>
			<h3> Vertical alignment of text</h3>
			<p> For the 320x50 ad size, where we alternate the title and decription text, the text should always be vertically centered within the ad. </p>
			<img src="images/frosty/specs/text-alignment.png">
		</section>

		<section>
			<h3> Default font</h3>
			<p> The default font used here is Roboto. </p>
		</section>
	</div>
</div>
<div class="ads-board">
					<span class="ad300x250label">300x250</span>
					<div class="ad300x250">
						<div class="logo">
							<img src="images/origami/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/origami/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad336x280label">336x280</span>
					<div class="ad336x280">
						<div class="logo">
							<img src="images/origami/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/origami/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad120x600label">120x600</span>
					<div class="ad120x600">
						<div class="logo">
							<img src="images/origami/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/origami/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad160x600label">160x600</span>
					<div class="ad160x600">
						<div class="logo">
							<img src="images/origami/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/origami/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad468x60label">468x60</span>
					<div class="ad468x60">
							<div class="logo">
							<img src="images/origami/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/origami/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad728x90label">728x90</span>
					<div class="ad728x90">
						<div class="logo">
							<img src="images/origami/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/origami/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>

					<span class="ad320x50label">320x50</span>
					<div class="ad320x50 highlight ft-fragment">
						<div class="logo">
							<img src="images/origami/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/origami/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
				</div>

<script>

$(window).load(function(){
	setTimeout(function(){$("body").removeClass("animate"); },300);
	setTimeout(function(){$(".ad320x50 .title").addClass("fade");$(".ad320x50 .description").addClass("fade");},1200);
});
$("document").ready(function(){

	$('select[name="colorpicker-bg1"]').simplecolorpicker({
	  picker: true
	}).on('change', function() {
	  $(".bg1").css('background-color', $('select[name="colorpicker-bg1"]').val());
	  
	  $('head').append("<style>.bg1:before{ background:"+$('select[name="colorpicker-bg1"]').val()+" !important;}</style>");

	});

	$('select[name="colorpicker-bg2"]').simplecolorpicker({
	  picker: true
	}).on('change', function() {
		console.log("k");
	  $(".bg2").css('background-color', $('select[name="colorpicker-bg2"]').val());
	});


	


	$(".toolbar a").click(function(){
		$(this).toggleClass("off");
		var which = $(this).attr("id");
		if (which=="showspecs"){
			$("body").toggleClass("ads").toggleClass("showspecs");
		}
		else if (which=="animate"){
			$("body").addClass("animate").animate({opacity:1},1000,function(){$(this).removeClass("animate")});
		}
		else{
			$(".ads-board").toggleClass(which+"-off");
			$("body").removeClass("showspecs").addClass("ads");
		}
	})
})
</script>
</body>
</html>